<template>
  <view class="content">
    <!-- #ifndef MP-TOUTIAO -->
    <singleHeader pageTitle="PC后台账户"></singleHeader>
    <!-- #endif -->

    <view class="list">
      <view class="item">
        <view class="name">登录地址</view>
        <view class="con">
          <view class="text">{{ data.url }}</view>
          <view class="copy" @click="copy(data.url)">复制</view>
        </view>
      </view>
      <view class="item">
        <view class="name">登录账号</view>
        <view class="con">
          <view class="text">{{ data.username }}</view>
          <view class="copy" @click="copy(data.username)">复制</view>
        </view>
      </view>
      <view class="item">
        <view class="name">登录密码</view>
        <view class="con">
          <view class="text">****** （默认手机号后六位）</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";
import { getStoreInfo } from "@/api/admin";

export default {
  components: {
    singleHeader,
  },

  data() {
    return {
      data: null,
    };
  },

  onLoad() {
    this.$utils.hideShareMenu();

    getStoreInfo().then((res) => {
      this.data = res.data;
    });
  },

  methods: {
    copy(data) {
      uni.setClipboardData({
        data,
        success: () => {
          this.$utils.toast(this.$t("common.copySuc"));
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
}

.list {
  padding: 0 24rpx;

  .name {
    margin: 40rpx 0 20rpx;
    font-size: 28rpx;
  }

  .con {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .text {
    position: relative;
    margin-right: 44rpx;
    padding-left: 20rpx;
    font-size: 24rpx;
    color: #666;

    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -4rpx;
      width: 8rpx;
      height: 8rpx;
      border-radius: 50%;
      background: #8c8c8c;
    }
  }

  .copy {
    padding: 4rpx 12rpx;
    font-size: 22rpx;
    border-radius: 32px;
    color: #262626;
    background: #f2f2f2;
  }
}
</style>
